<!--  -->
<template>
  <div class="root">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      class="demo-ruleForm"
    >
      <div class="title">叩丁狼商品管理系统</div>
      <el-form-item prop="username">
        <el-input
          v-model="ruleForm.username"
          type="text"
          autocomplete="off"
          @keyup.enter.native="submit"
          :prefix-icon="User"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          autocomplete="off"
          @keyup.enter.native="submit"
          :prefix-icon="Lock"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="LoginFn()">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance } from "element-plus";
import type { Ref } from "vue";
import { reactive, ref } from "vue";
import { umsAdmin } from "../../request/http";
import { useAdminStore } from "../../store/modules/admin";
import { User, Lock } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const adminStore = useAdminStore();

const ruleFormRef = ref() as Ref<FormInstance>;

const router = useRouter();

const ruleForm = reactive({
  username: "admin",
  password: "123456",
});
// 校验规则
const rules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { validator: valiUsername, trigger: "blur" },
  ],
});
// 校验用户名的函数
function valiUsername(
  rule: unknown,
  value: string | undefined,
  cb: (msg?: string) => void
) {
  if (value && value.length > 3) {
    cb();
  } else {
    cb("用户名不能少于3个字符");
  }
}

// 登录
async function LoginFn() {
  // FormData validate 方法
  // callback回调函数的写法：
  // ruleFormRef.value.validate((isVal: boolean) => {
  //   console.log(isVal);
  // });

  // promise的写法：
  // ruleFormRef.value
  //   .validate()
  //   .then(() => {
  //     console.log("then");
  //   })
  //   .catch(() => {
  //     console.log("catch");
  //   });

  // async--await的写法：记得函数前要加async
  try {
    await ruleFormRef.value.validate();
    const loginData = await umsAdmin.adminLogin({
      username: ruleForm.username,
      password: ruleForm.password,
    });

    if (loginData.code === 200) {
      const { tokenHead, token } = loginData.data;
      // 存储localStorage
      localStorage.setItem("token", tokenHead + token);
      // 获取用户信息
      // const adminInfo = await http.getAdminInfo();
      // if (adminInfo.code === 200) {
      // adminStore.updateMenus(adminInfo.data.menus);
      router.push("index");
      // }
    }
  } catch (e) {
    console.log("catch");
  }
}
// 回车登录
function submit() {
  LoginFn();
}
</script>

<style lang="less" scoped>
.root {
  width: 100vw;
  height: 100vh;
  background-color: #2d3a4b;
}
.demo-ruleForm {
  width: 420px;
  height: 250px;
  position: absolute;
  inset: 0;
  margin: auto;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  .title {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
  }
  :deep(.el-input) {
    height: 40px;
  }
  .el-button {
    width: 100%;
    height: 40px;
  }
  :deep(.el-input__wrapper) {
    background-color: #283443;
  }
  :deep(.el-input__inner) {
    color: #fff;
  }
}
</style>
